<template>
    <div class="meui-container h-full p-4">
        <div class="grid grid-cols-1 gap-4">
            <a-card v-for="category in state.categories" :key="category.id" class="effect-category-card">
                <template #title>
                    <div class="flex items-center">
                        <span>{{ category.name }}</span>
                    </div>
                </template>
                <div class="grid grid-cols-4 gap-4">
                    <div v-for="item in category.effects" :key="item.id" 
                        class="effect-item p-4 rounded-lg cursor-pointer hover:shadow-lg transition-all duration-300"
                        :style="{ backgroundColor: 'transparent' }"
                    >
                        <div class="text-center flex justify-center items-center">
                            <component :is="item.component" v-bind="item.meta">
                                {{ item.meta?.text }}
                            </component>
                        </div>
                    </div>
                </div>
            </a-card>
        </div>
    </div>
</template>

<script setup lang="ts" name="meui">
import { reactive } from 'vue';
import gradientButton from '@/components/inspiraUi/btn/gradientButton .vue';
import interactiveHoverButton from '@/components/inspiraUi/btn/interactiveHoverButton.vue';
import rainbowButton from '@/components/inspiraUi/btn/rainbowButton.vue';
import rippleButton from '@/components/inspiraUi/btn/rippleButton.vue';
import fallingStarsBackground from '@/components/inspiraUi/bg/fallingStarsBackground/index.vue';
import particlesBackground from '@/components/inspiraUi/bg/particlesBackground/index.vue';
import vortexBackground from '@/components/inspiraUi/bg/vortexBackground/vortexBackground.vue';

defineOptions({
    name: "meui",
})

const state = reactive({
    categories: [
        {
            id: 1,
            name: '按钮动画效果',
            effects: [
                {
                    id: 1,
                    component: gradientButton,
                    meta:{
                        bgColor:'#000',
                        style:{
                            color:'#fff'
                        },
                        text:'Button1 🚀'
                    }
                },
                {
                    id: 1,
                    component: interactiveHoverButton,
                    meta:{
                        text:'Button2 🚀'
                    }
                },
                {
                    id: 1,
                    component: rainbowButton,
                    meta:{
                        style:{
                            borderRadius:'15px',
                            color:'#000',
                        },
                        text:'Button3 🚀'
                    }
                },
                {
                    id: 1,
                    component: rippleButton,
                    meta:{
                        text:'Button4 🚀',
                        style:{
                            borderRadius:'15px',
                        },
                    }
                }
            ]
        },
        {
            id: 2,
            name: '背景动画效果',
            effects: [
                {
                    id: 1,
                    component: fallingStarsBackground,
                    meta:{
                        text:"背景效果"
                    }
                }, 
                {
                    id: 1,
                    component: particlesBackground,
                    meta:{
                        text:"背景效果"
                    }
                },
                {
                    id: 1,
                    component: vortexBackground,
                    meta:{
                        text:"背景效果"
                    }
                }
            ]
        }
    ]
})
</script>

<style scoped>
.effect-category-card {
    background: white;
    border-radius: 8px;
}

.effect-item {
    border: 1px solid #f0f0f0;
}

.effect-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 48px;
}

</style>